<template>
    <div class="personal_data">
        <div class="personal_conten">
            <div class="personal_photo xinxi">
                <p>头像</p>
                <div class="photo alter" @click="exchange(true)">
                    <img :src="userInfo.avatar | require('@/assets/my/headImg.png')" alt="" @error="$event.target.src = require('@/assets/my/headImg.png')">
                    <i class="icon iconfont icon-jiantouyou"></i>
                </div>
            </div>
            <div class="datum_name xinxi ziliao">
                <p class="f28">真实姓名</p>
                <div class="name alter" @click="amend(true, false)">
                    <span>{{nameData2}}</span>
                    <i class="icon iconfont icon-jiantouyou f28"></i>
                </div>
                <div style="clear:both"></div>
            </div>
            <div class="datum_birthdate xinxi ziliao">
                <p class="f28">擅长领域</p>
                <div class="birthdate alter">
                    <span class="latel">
                        <b v-for="(it, k) in masterData.domain" :key="k">{{it}}<div style="clear:both"></div></b>
                    </span>
                    <!-- <i class="icon iconfont icon-jiantouyou f28"></i> -->
                </div>
                <div style="clear:both"></div>
            </div>
            <div class="datum_site xinxi ziliao">
                <p class="f28">标签 </p>
                <div class="site alter" @click="addList()">
                    <span class="latel">
                        <b v-for="(it, k) in masterData.tag" :key="k">{{it}}<div style="clear:both"></div></b>
                    </span>
                    <!-- <i class="icon iconfont icon-jiantouyou f28"></i> -->
                </div>
                <div style="clear:both"></div>
            </div>
        </div>
        <div class="img_mask" v-if="ifMask" @click.stop="exchange(false)">
            <ul class="img_mask_operate">
                <li><h2 class="f30">选择图片</h2></li>
                <li class="f26">拍照</li>
                <li class="f26 xiangce">
                    <span>从相册中选择</span>
                    <input type="file" accept="image/*" @change="handleFile" class="hiddenInput"/>
                </li>
            </ul>
        </div>
        <div class="name_mark" v-if="isName">
            <div class="name_mark_box">
                <input type="text" v-model="nameData1">
                <button @click="amend(false, true)">保存</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'personalData',
        data() {
            return {
                ifMask: false,
                userInfo: {
                    avatar: 'http://demo.bjyoumeng.cn/Upload/shops/2018-10/5bd04185bbb91.png'
                },
                masterData: {},
                nameData1: '',
                nameData2: '',
                isName: false
            }
        },
        methods: {
            exchange(bool) {
                this.ifMask = bool;
            },
            handleFile: function (e) {
                let $target = e.target || e.srcElement
                let file = $target.files[0]
                var reader = new FileReader()
                reader.onload = (data) => {
                    let res = data.target || data.srcElement
                    this.userInfo.avatar = res.result
                    this.$http.fetchPost('UpdateMasterPhoto', {
                        id: this.$store.state.masterId,
                        userPhoto: this.userInfo.avatar
                    }).then(res => {
                        if (res.code == 200) {
                            this.$vux.toast.text('头像更改成功')
                        } else {
                            this.$vux.toast.text('头像更改失败')
                        }
                    }, err => {
                        console.log(err)
                    })
                    this.getInfo()
                }
                reader.readAsDataURL(file)
            },
            getmasterdetail() { // 大师详情
                let params = {
                    id: this.$store.state.masterId
                }
                this.$http.fetchGet('getmasterdetail', params).then(res => {
                    if(res.code == 200) {
                        this.masterData = res.data;
                        this.nameData2 = this.masterData.name
                        if(this.masterData.domain) {
                            this.masterData.domain = this.masterData.domain.split(',');
                        }
                        if(this.masterData.tag) {
                            this.masterData.tag = this.masterData.tag.split(',')
                        }
                        this.userInfo.avatar = this.masterData.userPhoto
                    } else {
                        console.log(res.msg)
                    }
                }, err => {

                })
            },
            amend(bool1, bool2) {
                this.isName = bool1
                if(bool2) {
                    if(this.nameData1.replace(/(^\s+)|(\s+$)/g,"") != ''){
                        let params = {
                            id: this.$store.state.masterId,
                            name: this.nameData1
                        }
                        this.$http.fetchGet('updateMasterName', params).then(res => {
                            if(res.code == 200) {
                                this.nameData2 = this.nameData1
                                this.$vux.toast.text('修改成功')
                            } else {
                                this.$vux.toast.text('修改失败')
                            }
                        }, err => {
                            console.log(err)
                        })
                    } else {
                        this.$vux.toast.text('不能为空哦')
                    }
                }
            }
        },
        mounted() {
            this.getmasterdetail()
        }
    }
</script>

<style lang="less" scoped>
    .personal_data{
        background: #f2f2f2;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        .personal_conten{
            background: #f2f2f2;
            width: 100%;
            height: 100%;
            .xinxi{
                position: relative;
                background: #fff;
                .pl(20);
                .pr(20);
                .alter{
                    float: right;
                    i.icon{
                        color: #666;
                    }
                }
                p{
                    color: #666;
                    float: left;
                }
                .birthdate{
                    span{
                       b{
                            font-weight: normal;
                            color: #189BEB;
                            border: 1px solid #189BEB;
                            border-radius: 5px;
                            .padd(0, 10);
                            .ml(6);
                        }
                    }
                }
                .name{
                    span{
                        color: #999;
                    }
                }
                .site{
                    width: 70%;
                    float: right;
                    .latel{
                        b{
                            .h(30);
                            .lh(30);
                            .padd(4, 6);
                            .ml(6);
                            .mt(30);
                            float: right;
                            display: inline-block;
                            color: #fff;
                            border-radius: 4px;
                            font-weight: normal;
                            &:nth-child(1n){
                                background: #FF607A;
                            }
                            &:nth-child(2n){
                                background: #59D3AC;
                            }
                            &:nth-child(3n){
                                background: #FEAD58;
                            }
                            &:nth-child(4n){
                                background: #37C5E2;
                            }
                        }
                    }
                }
                .birthdate{
                    width: 70%;
                    .lh(88);
                    .latel{
                        b{
                            float: right;
                            display: inline-block;
                            .h(30);
                            .lh(30);
                            .mt(30);
                        }
                    }
                }
            }
            .ziliao{
                border-bottom: 1px solid #f2f2f2;
                // .h(88);
                .lh(88);
            }
            .datum_site{

            }
            .personal_photo{
                .mb(20);
                .h(160);
                display: flex;
                p{
                    .lh(160);
                    color: #666;
                }
                .photo{
                    position: absolute;
                    right: 0;
                    top: 0;
                    .mt(20);
                    .mr(20);
                    .w(160);
                    .h(120);
                    img{
                        position: relative;
                        right: 0px;
                        // top: 10px;
                        .w(120);
                        .h(120);
                        border-radius: 50%;
                    }
                    i{
                        .mt(0);
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform:translateY(-50%);
                    }
                }
            }
        }
        .img_mask{
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.3);
            .img_mask_operate{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                .w(620);
                .h(376);
                background: #fff;
                border-radius: 10px;
                box-sizing: border-box;
                .padd(0, 50);
                display: flex;
                flex-direction: column;
                li{
                    flex: 1;
                    .lh(124);
                    color: #666;
                    h2{
                        color: #333;
                    }
                }
                .xiangce{
                    position: relative;
                    span{
                        z-index: 9;
                    }
                    input{
                        position: absolute;
                        top: 20px;
                        left: 0;
                        z-index: 10;
                        opacity: 0;
                    }
                }
            }
        }
        .name_mark{
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.3);
            .name_mark_box{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                .w(600);
                .h(300);
                background: #fff;
                border-radius: 5px;
                input{
                    width: 80%;
                    .h(60);
                    .pl(10);
                    .pr(10);
                    border: none;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                    display: block;
                    margin: 0 auto;
                    .mt(50);
                    &:focus {
                        outline:none;
                    }
                }
                button{
                    width: 80%;
                    .h(60);
                    border: none;
                    background: #189BEB;
                    color: #fff;
                    display: block;
                    margin: 0 auto;
                    .mt(60);
                    &:focus {
                        outline:none;
                    }
                }
            }
        }
    }
</style>
